﻿<template>
  <a-modal
    :width="850"
    :destroyOnClose="true"
    :visible="visible"
    :forceRender="true"
    title="批量导入"
    cancelText="取消上传"
    okText="开始上传"
    @cancel="handleCancel"
    @ok="handleSubmit">
    <a-spin :spinning="confirmLoading">
      <a-row :span="24">
        <span>请选择要导入的数据文件（Excel格式）</span>
      </a-row>
      <p></p>
      <a-row>
        <a-col :span="16">
          <a-upload-dragger accept=".xlsx,.xls" :multiple="false" :customRequest="customRequest" @change="handleChange" :beforeUpload="beforeUpload">
            <a-icon style="font-size: 40px;" type="cloud-upload" />
          </a-upload-dragger>
        </a-col>
        <!--<a-col :span="8">
          <span>导入模式：</span>
          <a-select
            style="width: 130px"
            placeholder="请选择导入模式"
            v-model="importExcelType">
            <a-select-option
              v-for="(item,index) in importExcelTypeData"
              :key="index"
              :value="item.code">{{ item.name }}
            </a-select-option>
          </a-select>
        </a-col>-->
      </a-row>
      <a-row :span="24">
        <!--<a-button @click="showDemand" style="width: 150px;text-align: left;" type="link" v-show="!detailed">
          点击查看文件上传要求
        </a-button>-->
        <span>【</span>
        <a-button style="width: 90px;text-align: left;" @click="testStudent3DownloadExcelTemplate" type="link">下载导入模板</a-button>，填写并上传
        <span>】</span>
        <a-button @click="showDemand" style="width: 150px;text-align: left;" type="link" v-show="detailed">
          收起
        </a-button>
      </a-row>
      <a-row v-show="detailed" style="background: #fef4e8; height: 30px;" :span="24">
        <a-breadcrumb>
          <a-breadcrumb-item style="line-height: 30px;color: #faad14;margin-left: 18px;">文件上传要求</a-breadcrumb-item>
        </a-breadcrumb>
      </a-row>
      <pre v-show="detailed">
        <div v-html="demandText"></div>
      </pre>
      <a-table v-show="detailed" :columns="columns" :data-source="dataList" :rowKey="(record) => record.processID" :pagination="false"></a-table>
      <pre v-show="detailed">
        <div v-html="columnText"></div>
      </pre>
    </a-spin>
  </a-modal>
</template>

<script>
	import { downloadFile, checkFile, parseExcelFieldText, parseDemandText } from '@/utils/util'

	import { TestStudent3FromExcel, TestStudent3DownloadExcelTemplate} from '@/api/modular/main/test/TestStudent3Manage'
	import { sysExcelTemplateGetColumnList } from '@/api/modular/system/excelTemplateManage'
	export default {
	components: {
	},
	data() {
	return {
	visible: false,
	detailed: false,
	confirmLoading: false,
	fileList: [],
	importExcelTypeData: [],
	importExcelType: '1',
	uploadFile: null,
	columns: [],
	dataList: [],
	demandText:'',
	columnText: ''
	}
	},
	methods: {
	index() {
	this.visible = true;
	this.importExcelTypeData = this.$options.filters['dictData']('import_excel_type')
	this.demandText = parseDemandText("testStudent3DownloadExcelTemplate")
	window.downloadFile = this.testStudent3DownloadExcelTemplate;
	this.getTable();
	},
	showDemand() {
	this.detailed = !this.detailed;
	},
	customRequest(document) {
	this.uploadFile = document
	},
	getTable() {
	sysExcelTemplateGetColumnList({className: "TestStudent3"}).then(res =>
	{
	if (res.success) {
	this.columns =[];
	this.dataList = [{}];
	res.data.forEach(x => {
	this.columns.push({
	dataIndex: x.columnName,
	key: x.columnName,
	title: x.columnComment
	});
	this.dataList[0][x.columnName] = x.isRequired ? "必填" : "非必填"
	});
	this.columnText = parseExcelFieldText(res.data);
	}
	});
	},
	beforeUpload(fileInfo) {
	let res = checkFile(fileInfo, 1073741824, ['.xlsx', '.xls']);
	if (!res.success) {
	this.$message.warning(res.msg)
	return false
	}
	setTimeout(() => {this.uploadFile.onSuccess(this.uploadFile.file)}, 1000)
	},
	handleChange(fileInfo) {
	if (fileInfo.file.status === 'error') {
	fileInfo.fileList.splice(0, 1)
	}
	if (fileInfo.file.status === 'done') {
	if (fileInfo.fileList.length > 1) {
	fileInfo.fileList.splice(0, 1)
	}
	this.fileList = fileInfo.file
	}
	},
	handleSubmit() {
	this.confirmLoading = true
	const formData = new FormData()
	formData.append('file', this.uploadFile.file)
	TestStudent3FromExcel(formData, {importExcelType: this.importExcelType}).then(res => {
	this.$message.success('操作成功')
	this.confirmLoading = false
	this.$emit('ok', [])
	this.handleCancel()
	}).finally((res)=>{this.confirmLoading = false})
	},
	handleCancel() {
	this.visible = false
	this.detailed = false
	},
	testStudent3DownloadExcelTemplate() {
	TestStudent3DownloadExcelTemplate({version: "v2"}).then((res) => {
	downloadFile(res);
	}).catch((err) => {
	this.$message.error('下载错误：获取文件流错误' + err)
	})
	}
	}
	}
</script>

<style scoped>
::v-deep .ant-upload.ant-upload-drag {
  position: relative;
  width: 140px;
  height: 135px;
  text-align: center;
  background: #fafafa;
  border: 1px dashed #d9d9d9;
  border-radius: 2px;
  cursor: pointer;
  -webkit-transition: border-color 0.3s;
  transition: border-color 0.3s;
}
::v-deep .ant-btn:focus:not(.ant-btn-primary):not(.ant-btn-danger), .ant-btn:hover:not(.ant-btn-primary):not(.ant-btn-danger) {
  color: #ffc53d;
  border-color: white;
}
</style>